<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>计划报表信息列表</title>
    <script src="/scripts/boot.js"></script>
    <script src="/scripts/res/third-party/echarts-4.1.0/echarts.js"></script>
    <style>
        html,body{
            margin:0;padding: 0;border:0;width:100%;height:100%;overflow:hidden;
        }
        body{
            background: #ffffff!important;
            padding:20px;
        }
        .container_box{
            height: 100px;
            text-align: center;

        }
    </style>
</head>
<body>
<div class="title-list mb-20"><span class="title-listbg"></span><span>项目主项计划统计</span></div>
<div id="qForm"  class="mini-toolbar1" style="border-bottom:0;padding:0px;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;">
                <div class="mb-20 position-rel">
                    <span class="search-title search-ml20">选择项目计划</span>
                    <input name="planId" id="planId" class="mini-treeselect" style="width: 250px; margin-left: 10px;" onbeforenodeselect="common.beforenodeselectPlan" showTreeIcon="true" valueField="id" textField="name"   parentField="parentid" expandOnLoad="true"/>
                    <!--<select id="itemName" name="itemName" class="mini-combobox w200" ajaxType="post" url="/statis/list/TreePlanVo?code=100042" emptyText="全部" showNullItem="true" nullItemText="全部" textField="name" valueField="id"></select>-->
                    <span class="search-title search-ml60">选择年月</span><div id="yearItem"></div>
                    <!--<span class="search-title search-ml20">选择年月</span><input id="date1" allowInput="false" class="mini-monthpicker search-200px"/>-->
                    <a class="add-botton search-ml60" onclick="list.search()">查询</a>
                    <a class="resetting-btn search-ml20" onclick="list.reset()">重置</a>
                </div>
            </td>
        </tr>
    </table>
</div>
<div class="container">
    <div class="mini-clearfix container_box">
        <div class="mini-col-6 mini-col-sm-3">
            <div><span class="f20" id="allTaskNum"></span><span class="sub">个</span></div>
            <div class="f10">全部任务</div>
        </div>
        <div class="mini-col-6 mini-col-sm-3">
            <div><span class="f20" id="noOverNum"></span><span class="sub">个</span></div>
            <div class="f10">未完成任务</div>
        </div>
        <!--<div class="mini-clearfix mini-visible-xs mini-unspace"></div>-->
        <div class="mini-col-6 mini-col-sm-3">
            <div class="title-orange"><span class="f20" id="overdueNum"></span><span class="sub">个</span></div>
            <div class="f10">逾期任务</div>
        </div>
        <div class="mini-col-6 mini-col-sm-3">
            <div><span class="f20" id="overNum"></span><span class="sub">个</span></div>
            <div class="f10">已完成任务</div>
        </div>
    </div>
    <div class="mini-clearfix">
        <div class="col-lg-6 col-sm-6 col-xs-6 col-sm-6">
            <div id="showChart" style="width: 50%; height: 300px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-6 col-sm-6">
            <div id="showChart1" style="width: 50%; height: 300px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-6 col-sm-6">
            <div id="showChart2" style="width: 50%; height: 300px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-6 col-sm-6">
            <div id="showChart3" style="width: 50%; height: 300px; margin-bottom: 8px; float: left; overflow: hidden;"></div>
        </div>
    </div>
</div>


<script type="text/javascript">

    var list = {
        init: function () {
            mini.parse();
            common.changeYears({
                'idName':'#yearItem',//绑定标签
                'isItem':true//全部
            });
            common.planProjectTree('100043');
            mini.get("month").select(0);
            list.SetData();
        },
        //查询
        search:function(){
            var years = mini.get("year").getValue();
            var mouths = mini.get("month").getValue();
            var choseText="",getText="";
            if(mouths==""){
                var choseYear = years+'-'+'01'+'-'+'01';
                choseText = new Date(choseYear).getTime();
            }else{
                var allYear = years+'-'+mouths+'-'+'01';
                getText = new Date(allYear).getTime();
            }
            var data = {
                "planId": mini.get("planId").getValue(),
                "year": choseText,
                "month": getText
            };
            list.SetData(data);
        },
        //重置
        reset:function(){
            mini.get("year").setValue(new Date().getFullYear());
            mini.get("month").select(0);
            var years = mini.get("year").getValue();
            var mouths = mini.get("month").getValue();
            mini.get("planId").setValue("");//清空项目名称
            var choseText="",getText="";
            if(mouths==""){
                var choseYear = years+'-'+'01'+'-'+'01';
                choseText = new Date(choseYear).getTime();
            }else{
                var allYear = years+'-'+mouths+'-'+'01';
                getText = new Date(allYear).getTime();
            }
            var data = {
                "planId": mini.get("planId").getValue(),
                "year": choseText,
                "month": getText
            };
            list.SetData(data);
        },
        //    数据展示
        SetData: function (parmes) {
            var dateText = new Date().getTime();
            var opt = {code: "100043","year":dateText};
            var opts = $.extend({},opt,parmes);
            common.loading("加载中");
            $.ajax({
                url:"/statis/list/info",
                data:opts,
                type: "post",
                success: function (text) {
                    $("#allTaskNum").text(text.allTaskNum);
                    $("#noOverNum").text(text.noOverNum);
                    $("#overdueNum").text(text.overdueNum);
                    $("#overNum").text(text.overNum);
                    list.fulfilTask(text);
                    list.unfinishedTask(text);
                    list.overdue(text);
                    list.yieldRate(text);
                    common.unmask();
                },
                error: function (errorMsg) {
                    var msg  = JSON.parse(errorMsg.responseText);
                    common.prompt(msg.message);
                }
            });
        },
        //已完成任务数
        fulfilTask:function (parms) {
            var optionbar = {
                title : {
                    left:60,
                    text: '任务完成情况统计',
                    subtext: '任务总数（个）'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    data:['总任务数','完成任务数']
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : parms.list[0].listMonth
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        minInterval: 1 ,
                        splitLine: {     //网格线
                            "show": false
                        }
                    }
                ],
                series : [
                    {
                        name:'总任务数',
                        type:'bar',
                        data:parms.list[0].listMonthAllTask,
                        itemStyle:{
                            normal:{
                                color:'#76a6f0'
                            }
                        }
                    },
                    {
                        name:'完成任务数',
                        type:'bar',
                        data:parms.list[0].listOver,
                        itemStyle:{
                            normal:{
                                color:'#02ccc3'
                            }
                        }
                    }
                ]
            };
            var chart = echarts.init(document.getElementById('showChart'));
            chart.setOption(optionbar);
        },
        //未完成任务数
        unfinishedTask:function (parms) {
            var option = {
                title : {
                    left:60,
                    text: '任务未完成情况统计',
                    subtext: '任务总数（个）'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    data:['总任务数','未完成任务数']
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : parms.list[0].listMonth
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        minInterval: 1 ,
                        splitLine: {     //网格线
                            "show": false
                        }
                    }
                ],
                series : [
                    {
                        name:'总任务数',
                        type:'bar',
                        data:parms.list[0].listMonthAllTask,
                        itemStyle:{
                            normal:{
                                color:'#76a6f0'
                            }
                        }
                    },
                    {
                        name:'未完成任务数',
                        type:'bar',
                        data:parms.list[0].listNoOver,
                        itemStyle:{
                            normal:{
                                color:'#a679f7'
                            }
                        }
                    }
                ]
            };
            var chart1 = echarts.init(document.getElementById('showChart1'));
            chart1.setOption(option);
        },
        //逾期任务数
        overdue:function (parms) {
            var optionbar = {
                title : {
                    left:60,
                    text: '任务逾期情况统计',
                    subtext: '任务总数（个）'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    data:['总任务数','逾期任务数']
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : parms.list[0].listMonth
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        minInterval: 1 ,
                        splitLine: {     //网格线
                            "show": false
                        }
                    }
                ],
                series : [
                    {
                        name:'总任务数',
                        type:'bar',
                        data:parms.list[0].listMonthAllTask,
                        itemStyle:{
                            normal:{
                                color:'#76a6f0'
                            }
                        }
                    },
                    {
                        name:'逾期任务数',
                        type:'bar',
                        data:parms.list[0].listOverdue,
                        itemStyle:{
                            normal:{
                                color:'#fc3d3d'
                            }
                        }
                    }
                ]
            };
            var chart = echarts.init(document.getElementById('showChart2'));
            chart.setOption(optionbar);
        },
        //按时达成率
        yieldRate:function (parms) {
            var optionbar = {
                title : {
                    left:60,
                    text: '任务按时达成率统计'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    data:['按时达成率']
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : parms.list[0].listMonth
                    }
                ],
                yAxis : [
                    {
                        type: 'value',
                        minInterval: 1 ,
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value} %'
                        },
                        splitLine: {     //网格线
                            "show": false
                        }
                    }
                ],
                series : [
                    {
                        name:'按时达成率',
                        type:'bar',
                        data:parms.list[0].listOverOnTime,
                        itemStyle:{
                            normal:{
                                color:'#02ccc3'
                            }
                        }
                    }
                ]
            };
            var chart = echarts.init(document.getElementById('showChart3'));
            chart.setOption(optionbar);
        }
    };
    list.init();
</script>
</body>
</html>